<template>
  <!-- 顶部栏 -->
  <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      class="fixed-top-bar">
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>

  <!-- 内容 -->
  <div id="content">
    <router-view/>
  </div>

  <!-- 底部菜单栏 -->
  <van-tabbar v-model="active" active-color="#4169E1">
    <van-tabbar-item to="/" name="index" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item to="/team" name="team" icon="search">队伍</van-tabbar-item>
    <van-tabbar-item to="/chat" name="chat" icon="friends-o">消息</van-tabbar-item>
    <van-tabbar-item to="/user" name="user" icon="setting-o">个人</van-tabbar-item>
  </van-tabbar>

</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import routes from "../config/router.ts";
import store from "../store";


const router = useRouter();
const route = useRoute();
const DEFAULT_TITLE = 'Minded';

const title = ref(DEFAULT_TITLE); // 页面标题

const active = ref('');

/**
 * 全局导航守卫
 * 根据路由切换标题
 */
router.beforeEach((to) => {
  const toPath = to.path;
  const route = routes.find((route) => {
    return toPath == route.path;
  });
  title.value = route?.title ?? DEFAULT_TITLE;
  updateActive(toPath);
  changeTitle(toPath);
})

const onClickLeft = () => {
  // 当处于主页四个主页面时不允许返回上一页
  const nowPath = route.path;
  if (nowPath == '/' || nowPath == '/team' || nowPath == '/user' || nowPath == '/chat') {
    return;
  } else {
    if (nowPath == '/user/interest') {
      router.push({path: '/user'})
      return;
    }
    // 路由跳转回到上一页
    router.back();
  }
};
const onClickRight = () => {
  // 路由跳转到 search 页面
  router.push('/search')
};

// 刷新下方导航栏导航提示
const updateActive = (toPath: string) => {
  if (toPath === '/') {
    active.value = 'index';
  } else if (toPath === '/team') {
    active.value = 'team';
  } else if (toPath === '/chat') {
    active.value = 'chat';
  } else if (toPath === '/user') {
    active.value = 'user';
  }
}

// 根据私聊用户改变标题
const changeTitle = (toPath: string) => {
  let chatUserName = store.state.chatUserName.name;
  if (toPath === '/chat/private') {
    title.value = chatUserName;

  }
}

</script>

<style scoped>
#content {
  padding-top: 46px; /* 确保内容不会被固定的顶部栏遮挡 */
  padding-bottom: 50px;
}
</style>